<template>
	<view id="form-box" class="form-box">
	<view class="agreement-main-box" v-show="flgx" >
		<view class="boss1">
			
		
<view class="" style="text-align: center;" @click="flgx=false">
		<image src="https://h5.sx2b2c.com/images/common/close.png" mode="widthFix" style="width: 50rpx;"></image>
</view>
			<view class="boss">
			
				<view class="" style="padding: 72rpx 0 0 40rpx;font-size: 28rpx;color: #51281D;">
					40元微信立减金+南瓜电影会员+100元团油券
				</view>
				<view class="topx" v-if="checked">
					<image :src="rootImagePath+'39-c.png'" mode="widthFix" style="width:330rpx"></image>
					<view class="" style="width: 30rpx;">

					</view>
					<image :src="rootImagePath+'45.png'" mode="widthFix" style="width:330rpx;" @click="change"></image>
				</view>
				<view class="topx" v-else>
					<image :src="rootImagePath+'39.png'" mode="widthFix" style="width:330rpx" @click="change"></image>
					<view class="" style="width: 30rpx;">

					</view>
					<image :src="rootImagePath+'45-c.png'" mode="widthFix" style="width:330rpx;"></image>
				</view>

				<view class="" style="text-align: center;padding-top: 70rpx">
					<image :src="rootImagePath+'btn1.png'" mode="widthFix" style="width:690rpx;" @click="pay"></image>
				</view>
				<view class="" style="color: #262626;width: 100%;margin-top:70rpx;font-size: 22rpx;text-align: center;">
					充值代表接受
					<text style="line-height: 36rpx;" @click.stop="showAgreementHandler(1)">《关于用户个人信息收集、使用规则公告》</text>
					<text style="line-height: 36rpx;" @click.stop="showAgreementHandler(2)">《产品说明》</text>
				</view>
			</view>
</view>

		</view>
		<view>
			<view class="input-box">
				<image mode="heightFix" class="mobile-icon" :src="rootImagePath +'mobile-icon.png'"
					style="pointer-events: none"></image>

				<input class="input" type="number" ref="input" maxlength="11" @input="inputPhone"
					v-model="formData.phone" placeholder="请输入手机号" placeholder-style="
font-size: 40rpx;
color: #2A2A2A;
">
			</view>

		</view>

		<view class="submit" @click="submitMethod">
			<!-- @click="submitMethod" -->
			<image class="submit-btn" mode="widthFix" :src="rootImagePath+'btn.png'" style="pointer-events: none">
			</image>
		</view>
		<view class="clauze">
			<checkbox-group @change="agreementChange">
				<checkbox :checked="formData.isAgreement" color="#10031f" style="transform : scale(0.7)" />
				<text class="clauze-txt">
					<text class="text" @click="agreementChange">
						我已阅读并同意
					</text>
					<text class="tip-color"
						@click="ng('https://h5-common.vcinema.cn/common/privacy.html')">《南瓜电影隐私保护指引》</text>
					<text class="tip-color"
						@click="ng('https://h5-common.vcinema.cn/common/xieyi.html')">《南瓜电影会员服务协议》</text>
					<text class="tip-color" @click.stop="showAgreementHandler(1)">《个人信息授权以及保护声明》</text>
					<text class="tip-color"
						@click="ng('https://h5-common.vcinema.cn/common/agreement_autopay.html')">《南瓜电影自动续费服务协议》</text>
						<text class="tip-color" @click="xieyi">《会员服务协议》</text>
					<text class="tip-color" @click.stop="showAgreementHandler(2)">《产品说明》</text>


				</text>
			</checkbox-group>


		</view>


	</view>
	<agreement-ng-39 v-if="isShowAgreement" :rootImagePath="rootImagePath" :agreementType="agreementType"
		@ok="agreementOkHandler"></agreement-ng-39>
	<agreement-confirm v-if="isShowAgreementConfirm" @ok="agreementConfirmOkHandler"
		@cancel="isShowAgreementConfirm = false"
		@showAgreement="agreementConfirmShowAgreementHandler"></agreement-confirm>
	<sms-confirm v-if="isShowSmsConfirm" :mobile="formData.phone" @success="smsConfirmSuccess"
		@cancel="isShowSmsConfirm = false"></sms-confirm>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref
	} from "vue";
	import validParamsUtil from "@/utils/validParamsUtil";
	import messageUtil from "@/utils/messageUtil.js"
	import smsApi from "@/apis/smsApi";
	import countDownUtil from "@/utils/countDownUtil.js"
	import httpUtil from "../../utils/httpUtil";
	import userApi from "../../apis/userApi";
	import openNewH5Util from "@/utils/openNewH5Util.js"
	import deviceUtil from "../../utils/deviceUtil";
	import paramApi from "@/apis/paramApi";
	import zfbUrlUtil from "@/utils/zfbUrlUtil.js"



	const formData = ref({
		username: '',
		phone: '',
		code: '',
		isAgreement: false,
	});

	const isShowSmsConfirm = ref(false)
	const flgx = ref(false)
	const checked = ref(true)
	const proCode = ref('LH2529')
	const payment_mode = ref('sign')
	const smsConfirmSuccess = (code) => {
		if (!code || code.length == 0) {
			messageUtil.showFail('验证码不能为空')
			return;
		}
		formData.value.code = code
		submitMethod();
	}

	const change = () => {
		checked.value = !checked.value
		console.log(checked.value)
		if (checked.value == true) {
			proCode.value = 'LH2529'
			payment_mode.value = 'sign'
		} else {
			proCode.value = 'LH2552'
			payment_mode.value = 'recharge'
		}

	}
	const pay = () => {
		submitOrder()
	
	}
	const isShowOpenNewBrowser = computed(() => {

		if (!formData.value.isAgreement || formData.value.phone.length < 11) {
			return false;
		}
		if (deviceUtil.isIOS) {
			return true;
		}
		return false;
	})

	const xieyi = () => {
		window.location.href = 'https://web.78keji.cn/xieyi/#/'
	}
	const ng = (item) => {
		window.location.href = item
	}
	const isShowAgreementConfirm = ref(false)

	const agreementConfirmOkHandler = () => {
		formData.value.isAgreement = true
		submitMethod()
	}

	const agreementConfirmShowAgreementHandler = (value) => {
		showAgreementHandler(value)
	}

	const isShowAgreement = ref(false)
	const agreementType = ref(1) // 1-订购须知,2-隐私政策

	const sendCodeDownNumber = ref(0);
	const sendCodeText = ref('获取验证码')


	const props = defineProps(['param', 'autoSubmit', 'mobile', 'rootImagePath'])

	onMounted(() => {
		if (formData.value.phone == '' && props.mobile) {
			formData.value.phone = props.mobile
		}
		if (props.autoSubmit == 1) {
			formData.value.isAgreement = true
			setTimeout(() => {
				submitMethod()
			}, 500)
		}
		// initShowTimeMethod()

	})

	const isNeedCodeValid = ref(true)
	const initH5IsCodeValid = () => {
		let params = {
			a: httpUtil.getA()
		}
		httpUtil.post('/api/alipayad/status', params, res => {
			if (res.data.pro_w && parseInt(res.data.pro_w) > 0) {
				isNeedCodeValid.value = false
			}
		})
	}

	const agreementChange = (e) => {
		formData.value.isAgreement = !formData.value.isAgreement;
	}

	const showAgreementHandler = (value) => {
		isShowAgreement.value = true;
		agreementType.value = value;
	}

	const gotoWebUrl = (pagePath) => {
		window.location.href = pagePath
	}

	const agreementOkHandler = () => {
		isShowAgreement.value = false;

	}

	const sendCodeHandler = () => {
		if (!validParamsUtil.validPhone(formData.value.phone)) {
			messageUtil.showFail('手机号不正确');
			return;
		}
		if (!countDownUtil.valid(sendCodeDownNumber.value)) {
			return;
		}

		smsApi.sendPaySms(formData.value.phone, res => {
			messageUtil.showSuccess('短信发送成功')

			sendCodeDownNumber.value = 60;
			countDownUtil.start(sendCodeDownNumber.value, res => {
				sendCodeDownNumber.value = res;
				if (res <= 0) {
					sendCodeText.value = '获取验证码';
				} else {
					sendCodeText.value = res;
				}
			})

		}, err => {

		})
	}

	const submitMethod = () => {
		console.log(111)
		uni.hideKeyboard()
		if (!validParamsUtil.validPhone(formData.value.phone)) {
			messageUtil.showFail('手机号格式不正确')
			return;
		}
		// formData.value.isAgreement = true;
		if (!formData.value.isAgreement) {
			// messageUtil.showFail('请先同意并阅读相关条款')
			console.log('submitMethod2')
			isShowAgreementConfirm.value = true
			return;
		}



	flgx.value = true



	}

	const validCode = () => {
		let params = {
			mobile: formData.value.phone,
			captcha: formData.value.code,
			type: 3,
		}
		httpUtil.post('/api/tongliansign/checkSms', params, res => {
			submitOrder()
		})
	}

	const submitOrder = () => {
		messageUtil.showLoading()
		uni.hideKeyboard()

		let params = {
			returnEncParam: '1',
			a: httpUtil.getA(),
			mobile: formData.value.phone,
			proCode: 'LH2529',
			uuid: uni.getStorageSync('uuid'),
			payment_method:'WXPAY'
		}

		if (deviceUtil.isWeChatBrowser()) {
			params.env = 'JSAPI'
		} else {
			params.env = 'H5'
		}

		if (paramApi.getParam()) {
			params.param = paramApi.getParam()
		}

		if (userApi.getUserId()) {
			params.openid = userApi.getUserId()
		}

		if (formData.value.code) {
			params.captcha = formData.value.code
			formData.value.code = ''
		}

		httpUtil.post('/api/ng/subOrderNew', params, res => {
			messageUtil.closeLoading()

			// console.log(res.data)
			// PumpkinPay({
			// 	secret: res.data.secret,
			// 	channel: res.data.channel,
			// 	pid: res.data.pid,
			// 	extra: res.data.extra,
			// 	phone: res.data.phone,
			// 	addtional_benefit: 'NORMAL_PARKING_V2',
			// 	payment_method: 'WXPAY',
			// 	pay_scene: params.env
			// }).then((res) => {
			// 	console.log(res)
			
			// 	if(res.error_code==0){
			// 		window.location.href=res.content.order_info.pay_url
			// 	}else{
			// 		messageUtil.showFail(res.message)
			// 	}
			// 	// 
			// })
			if (payment_mode.value == 'recharge') {
			
				PumpkinPay.payment({
					secret: res.data.secret,
					channel: res.data.channel,
					pid: res.data.pid,
					extra: res.data.extra,
					phone: res.data.phone,
					addtional_benefit: 'JL_SINGLE_PARKING',
					payment_method: 'WXPAY',
					pay_scene: params.env,
					payment_mode: payment_mode.value,
					wx_auth_code: uni.getStorageSync('code')
			
				}).then((res) => {
					console.log(res)
			
					if (res.error_code == 0) {
			
						if (deviceUtil.isWeChatBrowser()) { // 在微信内直充
							let orderObj = JSON.parse(res.content.order_info.pay_url)
							WeixinJSBridge.invoke('getBrandWCPayRequest', {
								"appId": orderObj.appId,
								"timeStamp": orderObj.timeStamp,
								"nonceStr": orderObj.nonceStr,
								"package": orderObj.package,
								"signType": orderObj.signType,
								"paySign": orderObj.paySign
					 	}, function(res) {
								console.log(res, '支付结果')
								if (res.err_msg == 'get_brand_wcpay_request:ok') {
									// 支付成功
									console.log('支付成功');
								} else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
									// 您已取消支付
								PumpkinPay.authorization({
								 url: uni.getStorageSync('local'),
								 })
									console.log('您已取消支付');
								} else {
									// 支付失败,请重新支付
									PumpkinPay.authorization({
									 url: uni.getStorageSync('local'),
									 })
									console.log('支付失败,请重新支付');
								}
							});
						} else {
							window.location.href = res.content.order_info.pay_url
						}
			
					} else {
						messageUtil.showFail(res.message)
						phoneApi.getOperator(formData.value.phone, (resx) => {
			
							if (resx.Isp == '中国电信') {
								var ips = 'ISP-DX'
							} else if (resx.Isp == '中国联通') {
								var ips = 'ISP-LT'
							} else {
								var ips = 'ISP-CMCC'
							}
							const sdk = recsdk.init({
								"sessionId": uni.getStorageSync('uuid'),
								"unionKey": "f61024a966ed420a867929594a3955c8"
							})
							sdk.getAd({
								isp: ips,
								phoneNum: formData.value.phone,
								phoneProvince: resx.Province,
								errCode: "",
								errMsg: "",
								media: '202411141006315807',
								pointNum: "home_leave",
								open: true,
								redirectTime: 2000,
								testFlag: 0,
							}, res => {
			
								console.log(res)
							})
			
						});
					}
					// 
				})
			
			} else {
			
				PumpkinPay.payment({
					secret: res.data.secret,
					channel: res.data.channel,
					pid: res.data.pid,
					extra: res.data.extra,
					phone: res.data.phone,
					addtional_benefit: 'NORMAL_PARKING_V2',
					payment_method: 'WXPAY',
					pay_scene: params.env,
					payment_mode: payment_mode.value
				}).then((res) => {
					console.log(res)
			
					if (res.error_code == 0) {
						window.location.href = res.content.order_info.pay_url
					} else {
						messageUtil.showFail(res.message)
						phoneApi.getOperator(formData.value.phone, (resx) => {
			
							if (resx.Isp == '中国电信') {
								var ips = 'ISP-DX'
							} else if (resx.Isp == '中国联通') {
								var ips = 'ISP-LT'
							} else {
								var ips = 'ISP-CMCC'
							}
							const sdk = recsdk.init({
								"sessionId": uni.getStorageSync('uuid'),
								"unionKey": "f61024a966ed420a867929594a3955c8"
							})
							sdk.getAd({
								isp: ips,
								phoneNum: formData.value.phone,
								phoneProvince: resx.Province,
								errCode: "",
								errMsg: "",
								media: '202411141006315807',
								pointNum: "home_leave",
								open: true,
								redirectTime: 2000,
								testFlag: 0,
							}, res => {
			
								console.log(res)
							})
			
						});
					}
					// 
				})
			}
		}, err => {
			

		})

	}



	const inputPhone = () => {
		if (formData.value.phone.length == 11) {

			initH5IsCodeValid()
			setTimeout(() => {
				submitMethod()
			}, 500);


		}
	}


</script>

<style lang="scss" scoped>
	.boss1{
		position: fixed;
		bottom: 0;
		
		right: 0;
		left: 0;
	}
	.boss {
	
		background-color: #F5F5F5;
		
		height: 853rpx;
		background: #F5F5F5;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
	}
	
	.topx {
	
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 90rpx;
	
	
	}
	
	.agreement-main-box {
		position: fixed;
		left: 0;
		top: 0;
	
		width: 100%;
		height: 100vh;
	
		background: url("https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fcommon%2Flogin-shadow-bg.png") repeat;
		z-index: 3;
	
	
	}
	@keyframes butChange {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.form-box {
		// top: 91vw;
		// position: absolute;
		width: 100%;
		padding: 10rpx 0 0 0;
		// background-color: #edf3ff;
		// >view {
		// 	padding: 1.5rem 0 0.8rem;
		// 	background-size: 100% 100%;
		// }

	}

	.roll-left-mobile-box {
		margin-bottom: 24rpx;
	}

	.roll-up-mobile-box {
		width: 94%;
		margin: 0 auto;
	}

	.count-down-time-box {
		width: 94%;
		margin: 32rpx auto;
	}

	.input-box {
		width: 75%;
		margin: 0 auto 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1px solid rgb(220, 223, 230);

		background-color: #ffffff;
		border-radius: 52rpx;


		.mobile-icon {
			height: 60rpx;
			width: auto;
			margin-left: 20rpx;
		}

		.split {
			width: 1px;
			height: 21px;
			border-right: 1px solid rgb(180, 180, 180);
			margin-left: 3px;
		}

		text {
			font-family: PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #26265F;
			margin-left: 36rpx;
		}

		.input {
			flex-grow: 1;
			height: 90rpx;
			box-sizing: border-box;
			font-family: SourceHanSansSC-Normal;
			font-size: 32rpx;
			letter-spacing: 3rpx;
			font-weight: 500;
			color: #202E42;
			// padding-left: 80rpx;
			margin-left: 24rpx;

			&::-webkit-input-placeholder,
			&::-ms-input-placeholder {
				color: #202E42;
				font-size: 32rpx;
			}

			&::-webkit-input-placeholder {
				color: #202E42;
				font-size: 32rpx;
			}

			&::-moz-placeholder {
				font-size: 40rpx;
				color: #2A2A2A;
				font-weight: bold
			}

		}

		.send-code {
			width: 316rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			background-color: #6991E9;
			border-radius: 38rpx;
			font-family: SourceHanSansSC-Normal;
			font-size: 30rpx;
			letter-spacing: 3rpx;
			color: #FFFFFF;
			margin-right: 20rpx;
		}
	}

	.clauze {
		width: 540rpx;
		font-size: 24rpx;
		margin: 10rpx auto 0;
		text-align: center;
		font-family: SourceHanSansSC-Light;
		display: flex;
		justify-content: center;
		align-items: center;

		.clauze-txt {
			line-height: 30rpx;
		}

		.uni-checkbox-input {
			border-radius: 100%;
			background-color: none;
		}

		.uni-checkbox-wrapper {
			width: 22rpx;
			height: 22rpx;
		}

		.text {
			font-size: 20rpx;
			color: #0F0F0F;

		}

		.tip-color {
			color: #2A5EBD;
			font-size: 20rpx;
			font-weight: 600;
		}


	}

	.foot-tip-text {
		width: 90%;
		font-size: 24rpx;
		text-align: center;
		font-family: SourceHanSansSC-Light;

		margin: 10rpx auto 0;

		.link {
			font-size: 24rpx;
			text-align: center;
			font-family: SourceHanSansSC-Light;
			letter-spacing: 2rpx;
			color: #fff;
		}
	}

	// ::v-deep(.van-checkbox__text) {
	// 	color: #FFFFFF;
	// 	font-size: .8rem;
	// }

	.submit {
		width: 700rpx;
		margin: 35rpx auto 0;
		display: block;
		text-align: center;
		padding: 0;

		.submit-btn {
			width: 80%;
			height: auto;
			animation: butChange 1s infinite;
		}
	}
</style>